<template>
	<view class="app-content">
		<view class="img">
			<!-- <u-swiper class="item" :list="list4" keyName="url" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px">
			</u-swiper>
			 -->
			<swiper class="swiper" indicator-active-color="#FFFFFF" circular autoplay="true"  @change="handelChange" :indicator-dots="true">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<video v-if="item.includes('.mp4')" :src="currentNum==index?rq.imgUrl(item):''" autoplay :loop="true"  style="width: 100%; height: 100%;" ></video>
					<image v-else :src="rq.imgUrl(item)" mode="aspectFill" class="syimg1"></image>
				</swiper-item>
			</swiper>
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text"> <text>{{ currentNum + 1 }}</text>/{{ bannerList.length}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="b1" @click="handleZan()"> 
				<image v-if="!isZan" src="https://pw.qyang.cc/static/p-zan.png" mode=""></image>
				<image v-else src="https://pw.qyang.cc/static/p-zan1.png" mode=""></image>
				<span style="margin-left: 5rpx;">{{userInfo.zan}}</span>
			</view>
			<view class="b2" @click="handleCai()">
				<image v-if="!isCai" src="https://pw.qyang.cc/static/p-cai.png" mode=""></image>
				<image v-else src="https://pw.qyang.cc/static/p-cai1.png" mode=""></image>
				<span style="margin-left: 5rpx;">{{userInfo.cai_num}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				videoList:[],
				bannerList:[],
				url: '',
				isZan: 0,
				isCai: 0,
				currentNum: 0,
				id:0,
				userInfo:[]
			}
		},
		onLoad(opt) {
			// this.list.push(JSON.parse(opt.item))
			this.id=opt.id
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.rq.getData('daren/daren_detail', {
					id: this.id,
				}).then(res => {
					this.userInfo = res.data
					this.bannerList = res.data.images_arr
					this.videoList = res.data.video_files.split(',')
					this.bannerList = [...this.bannerList,...this.videoList]
					this.isCai = res.data.cai
					this.isZan = res.data.upvote
				})
			},
			previewImage(item) {
				var list = []
				
				list.push(this.rq.imgUrl(this.userInfo.breviary_image))
				for (var i = 0; i < this.bannerList.length; i++) {
					list.push(this.rq.imgUrl(this.bannerList[i]))
				}
				uni.previewImage({
					current: item, // 当前显示图片的http链接
					urls: list // 需要预览的图片http链接列表
				});
			
			},
			handelChange(e){
				this.currentNum = e.detail.current
			},
			handleZan(item, index) {
				this.rq.getData('collect/set_upvote', {
					id: this.userInfo.id,
					class: 'upvote',
					type: 2
				}).then(res => {
					if (res.code === 1) {
						this.isZan = this.isZan == 1 ? 0 : 1
						this.userInfo.zan =
							this.isZan == 1 ?
							this.userInfo.zan + 1 : this.userInfo.zan - 1
					}
				})
			},
			handleCai(item, index) {
				this.rq.getData('collect/set_upvote', {
					id: this.userInfo.id,
					class: 'cai',
					type: 2
				}).then(res => {
					if (res.code === 1) {
						this.isCai = this.isCai == 1 ? 0 : 1
						this.userInfo.cai_num =
							this.isCai == 1 ?
							this.userInfo.cai_num + 1 : this.userInfo.cai_num - 1
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.img {
		width: 100%;
		margin-bottom: 120rpx;

		.item {
			width: 100%;
			padding-top: 30rpx;
		}

		.indicator-num {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 44rpx;
			
			.indicator-num__text {
				color: #999999;
				
				text{
					color: #333333
				}
			}
		}
	}

	.bottom {
		position: absolute;
		bottom: 0;
		height: 58px;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b1,
		.b2 {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 24px;
			height: 24px;
		}
	}
	
	.swiper {
		height: 800rpx;
		width: 100%;
		.syimg1 {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	
</style>